/**
 * Use only relative units: px, em and ex
 */
body {
 font: 10px Verdana,sans-serif;
}

#you-have-ie, .onlyprint {
 display: none;
}

#wrapper {
 background-color: #f1f1e6;
 border: 1px solid #82827c;
 margin: 10px auto 0px auto;
 width: 615px;
 padding: 0;
 -webkit-box-shadow: #82827c 1px 2px 5px;
}

h1 {
 margin: 0;
 text-align: center;
 border-bottom: 3px solid #82827c;
 font-size: 2.2em;
 padding-bottom: 3px;
 text-shadow: white -1px -1px 0px;
}

#changed {
 display: none;
}

.changed #changed {
 display: inline;
}

h2 {
 margin: 0;
 border-top: 4px solid #f1f1e6;
 border-bottom: 2px solid #f1f1e6;
 padding: 0 1em 1px 1em;
 background-color: #82827c;
 color: #fff;
 font-weight: bold;
 font-size: 14px;
 clear: both;
 text-shadow: #333 1px 1px 1px;
}

h3 {
 margin: 0;
 padding: 0 5px;
 font-size: 12px;
}

p {
 margin: 3px 5px;
}

em {
 font-style: normal;
 font-weight: bold;
}

#color {
 float: right;
 width: 105px;
 height: 70px;
 margin: -30px 10px 0 0;
 border: 1px solid #6f6f6a;
 background-color: #fff;
 -webkit-box-shadow: #82827c 2px 2px 4px;
}

.primary {
 float: left;
 margin-right: 3em;
 min-width: 280px;
}

#s_general .primary {
 min-width: 240px;
}

.clear {
 clear: both;
}

/* Tables:: */

table {
 border-collapse: collapse;
 margin-left: 3pt;
}

tr.emptyrow button, tr.emptyrow a {
  display: none;
}

th {
 text-align: left;
 vertical-align: bottom;
 white-space: nowrap;
 font-weight: bold;
 font-size: 80%;
}

th.numerical {
 text-align: right;
 padding-right: 3px;
}

td {
 vertical-align: middle;
 white-space: nowrap;
}

/* Labels:: */

label {
 display: block;
 float: left;
 width: 12em;
 padding-top: 2px;
}

.primary label {
 width: 15em;
}

label[for="name"], label[for="klasse"] {
 width: 7em;
}

label[for="style"], label[for="brew-date"], label[for="bottle-volume"], label[for="alcohol"] {
 float: none;
 display: inline;
 padding: 0 0.5em 0 2em;
}

label[for="svg"], tr.summary label {
 padding-right: .5em;
 width: auto;
}

#s_general label {
 width: 8em;
}

#s_general .primary label {
 width: 14em;
}

#s_judgement label {
 clear: left;
}

/* Inputs:: */

input, textarea {
 font: 12px monospace;
 border: 1px solid #82827c;
 vertical-align: baseline;
 margin: 0;
 /* position of lock image */
 background-position: right bottom;
 background-repeat: no-repeat;
}

input:focus {
 background-color: #f9f9c8;
}

input:disabled {
 color: #111;
 background-color: #f1f1da;
 border: 1px solid #ccccb9;
}

input[type="text"] {
 width: 180px;
}

input.number, input.real {
 width: 64px;
 text-align: right;
 /* position of lock image */
 background-position: left bottom;
}

input.date {
 width: 100px;
}

input.lockable {
 background-image: url(../images/unlock.png);
}

input.locked {
 background-image: url(../images/lock.png);
}

.multistate {
 padding: 1px 4px;
 font-size: 100%;
 border: 1px solid #82827c;
 background: #fff;
 -webkit-box-shadow: #82827c 2px 2px 3px;
 margin: 0 1px 1px 0;
}

.multistate:active {
 -webkit-box-shadow: none;
 margin: 1px 0 0 1px;
}

#s_judgement input {
 width: 510px;
}

#batch {
 width: 40px;
 margin: 0;
 color: #fff;
 background-color: #82827c;
 font-size: 22px;
 font-weight: bold;
 float: right;
 border: none;
 padding: 4px 3px 3px 3px;
 text-align: center;
 text-shadow: #333 1px 1px 1px;
}

#name {
 width: 360px;
}

#klasse {
 width: 20px;
}

#brew-date {
 width: 80px;
}

#priming-name, #starter-temp {
 margin-left: 0.5em;
}

#notes {
 margin: 1px;
 width: 611px;
 height: 120px;
}

#print-notes {
 display: none;
}

#footer p {
 text-align: right;
 margin: 4px;
}

#logo {
 margin: -14px -48px -1px 0px;
} 


/**
 * Interactive feedback and errors
 */


a.delete {
 color: maroon;
 font-weight: bold;
 text-decoration: none;
 font-size: 110%;
 cursor: pointer;
}

#spinner {
 position: fixed;
 top: 8px;
 right: 8px;
}

.nfe {
 /* number format error */
 color: red;
}

.warning {
 width: 615px;
 margin: 1em auto;
 border: 1px solid red;
 background-color: #fcc;
}

/**
 * Dialogs
 */

.dialog {
 display: none;
 background: #eee;
 z-index: 9999;
 position: fixed;
 top: 0;
 padding: 2px 6px 6px;
 border: 1px solid #666;
 border-top: 4px solid #444;
}

.dialog select {
 border: 1px solid gray;
}

.buttonbar {
 padding: 6px 0;
 float: left;
}

.buttonbar button {
 margin: 0 0 0 2em;
}

.dialog .buttonbar button {
 float: right;
}

#filedialog {
 width: 270px;
}

.dialog h1 {
 margin: 4px 0 2px;
 border: none;
 font-size: 14px;
}

#filedialog select {
 margin: 0;
 min-width: 270px;
}

#importdialog {
 width: 300px;
}

#exportdialog {
 width: 500px;
}


#statusbar {
 background-color: #82827c;
 color: white;
 margin: 0;
 padding: 3px;
 display: none;
 height: 12px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
}

#s_style, #s_menu {
 position: fixed;
 background-color: #ffe6cc;
 z-index: 99;
 opacity: 0.7;
 border: 1px solid #82827c;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -webkit-box-shadow: #82827c 1px 2px 5px;
}

#s_style {
 left: 3px;
 top: 220px;
}

#s_style h2, #s_menu h2 {
 margin: -1px 0 0 0;
 border: none;
 text-align: center;
 opacity: 0.8;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
}

#s_menu {
 left: 18px;
 top: 40px;
 padding: 0;
}

#s_menu button {
 display: block;
 background-color: transparent;
 border: none;
 margin: 0 4px;
 cursor: pointer;
}

#s_menu hr {
 height: 1px;
 background-color: #82827c;
 border: none;
}

#footer {
 position: fixed;
 bottom: 0;
 right: 0;
 margin-bottom: 0;
}


